<!DOCTYPE html>
<html>
	<head>
		<meta name="description" content="Export your cyworld photos and diary contents.">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Cyworld Exporter</title>
		<link rel="stylesheet" href="/static/boxy.css" type="text/css">
		<style type="text/css">
			#export-form {display:none}
			#export-form ul {list-style:none}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript" src="/static/jquery.boxy.js"></script>
		<script type="text/javascript">
			var loginWin;
			var credential;
			var tid;
			var login = function(win) {
				var param = {tid: tid, email: win.document.getElementById("email").value, password: win.document.getElementById("passwd").value};
				win.document.getElementById("contents").innerHTML = "Logging in...";
				$.post('/login', param, function(result) {
					if(result) {
						credential = result;
					} else {
						new Boxy("<p>Something went wrong :o</p>", {title: 'Error', modal: true, closeable: true});
					}
					win.close();
				}, "json");
			}
			$(function() {
				$(".select-all").click(function() {
					$("#" + $(this).attr("id").replace("select-all-","") + "-folders :checkbox").attr('checked','checked');
					return false;
				});
				$("#export-form").submit(function() {
					return false;
				});
				$("#folders-form").submit(function() {
					var box = new Boxy("<em>Fetching folder list...</em>", {modal: true, closeable: false});
					$("#photo-folders, #diary-folders").empty().hide();

					var form = this;
					var param = credential ? credential : {};
					param['tid'] = tid;
					var successOne = false;
					$.ajax({
						  url: form.action + "/photo",
						  dataType: "json",
						  data: param,
						  success: function(data) {
							$("#photo-folders").html(data && data.folder_list && data.folder_list.length > 0 ? $(data.folder_list).map(function() {
								return '<li style="list-style-image:url(\'' + this.default_image + '\');margin-left:92px"><input type="checkbox" name="photo_id[]" value="'+ this.id +'" id="p'+ this.id +'"/><label for="p'+ this.id +'">' + this.title.text + '</label></li>';
							}).get().join("") : '<li>Item not found.</li>');
							successOne || (successOne = true);
							successOne && $("#info").text("Success!");
							$("#export-form, #photo-folders").fadeIn();
							$("#folders-form").hide();
							box.hideAndUnload();
						  },
						  error: function() {
							  box.hideAndUnload();
							  new Boxy("<p>Something went wrong :o</p>", {title: 'Error', modal: true, closeable: true});
						  }
					});
							  
					$.ajax({
						  url: form.action + "/diary",
						  dataType: "json",
						  data: param,
						  success: function(data) {
							$("#export-form").show();
							$("#diary-folders").html(data && data.length > 0 ? $(data).map(function() {
								return '<li><input type="checkbox" name="diary_id[]" value="'+ this.id +'" id="d'+ this.id +'"/><label for="d'+ this.id +'">' + this.name + '</label></li>';
							}).get().join("") : '<li>Item not found.</li>');
					
							successOne || (successOne = true);
							successOne && $("#info").text("Success!");
							$("#export-form, #diary-folders").fadeIn();
							$("#folders-form").hide();
							box.hideAndUnload();
						  },
						  error: function() {
							  box.hideAndUnload();
							  new Boxy("<p>Something went wrong :o</p>", {title: 'Error', modal: true, closeable: true});
						  }
					});							  
				  
					return false;
				});
				$("#id").change(function() {
					var input = $(this);
					var val = input.val();
					if(val) {
						var box = new Boxy("<em>Analyzing url...</em>", {modal: true, closeable: false});
						$("#photo_folders, #diary_folders").empty();
						$("#export-form").hide();
						$.ajax({
							  url: "/tid",
							  dataType: "json",
							  data: {id: val},
							  success: function(result) {
								if(result.tid) {
									tid = result.tid;
									$("#includes-private-data, #folders-form input[type=submit]").removeAttr("disabled");
									$("#info").text("Found.");
									box.hideAndUnload();
								}
							  },
							  error: function() {
								  input.val('');
								  box.hideAndUnload();
								  new Boxy("<p>Something went wrong :o</p>", {title: 'Error', modal: true, closeable: true});
							  }
						});											
					}
				})
				$("#includes-private-data").click(function() {
					if(this.checked) {
						var loginWin = window.open('about:blank','loginWindow','width=400,height=345');
						loginWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \
						<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> \
						<head> \
						<title>사이좋은 사람들 싸이월드 - 로그인</title>\
						<meta http-equiv="content-type" content="text/html; charset=utf-8">\
						<link rel="stylesheet" type="text/css" href="http://cyxso.cyworld.com/common/css/web/login.css" />\
						<style type="text/css">html {overflow:hidden;}</style>\
						</head>\
						<body class="popup">\
						<div id="header"> \
					  	  <h3>싸이월드 로그인</h3>\
						</div> \
						<hr /> \
						<div id="contents">\
						    <div id="LoginBox">\
						        <form id="login" name="login" target="_self" action="javascript:opener.login(window)">\
						        <fieldset> \
						            <legend>로그인</legend>\
						            <dl> \
						                <dt>로그인</dt>\
						                <dd> \
						                    <input type="email" id="email" name="email" tabindex="1" title="이메일 주소 입력" onclick="this.className=\'bg\';" onKeyDown="this.className=\'bg\';" style="ime-mode:disabled"/>\
						                </dd> \
						                <dd> \
											<input type="password" id="passwd" name="passwd" tabindex="2" title="비밀번호 입력" onclick="this.className=\'bg\';" onKeyDown="this.className=\'bg\';" enc="on" oncopy="return false;"/>\
						                </dd> \
						                <dd class="check">\
						                    <label for="echk" id="echk" name="echk" class="" tabindex="3">이메일 저장</label>\
						                </dd> \
						                <dd class="btn">\
						                    <input type="submit" class="btn" tabindex="4" title="로그인버튼" value=""/>\
						                </dd> \
						            </dl> \
						        </fieldset>\
						        </form> \
						        <dl class="otp">\
						            <dt>OTP 보안</dt>\
						            <dd class="levelText">보안<span id="securityText">2</span>단계</dd>\
						            <dd class="level"> \
										<iframe src="http://cyxso.cyworld.com/common/secure/login_ifrm_level.html" id="xXecureIfrm" name="xXecureIfrm" frameborder="0" scrolling="no" title="OTP Level Bar"></iframe>\
						            </dd> \
						           	<dd class="IP"><span id="ipLevelText" class="level2" onclick="">IP보안단계 : 보통</span></dd>\
						            <dd class="info"> \
						                <a onclick="" class="btn" title="OTP보안 안내">OTP보안 안내</a>\
						            </dd> \
						        </dl> 		\
						        <div class="loginbtn">\
						            <a href="http://helpdesk.cyworld.com/id/id_main.asp" target="_blank" class="searchpass">싸이월드 이메일/비밀번호 찾기</a> ㅣ\
						            <a href="http://www.cyworld.com/main2/register/register.asp" target="_blank" class="join">싸이월드 회원가입</a><br /> \
						            <a href="http://xo.nate.com/Login.sk" target="_blank" class="nate">네이트 회원 로그인하기</a> \
						        </div> \
						    </div> \
						</div></body></html>');
						loginWin.document.close();
						loginWin.focus();
						$(loginWin).unload(function() {
							credential || $("#includes-private-data").removeAttr("checked");
						});
					}
				});
			});
		</script>
		<h1>cyworld exporter</h1>
		<div id="info"></div>
		<form action="/folders" method="post" id="folders-form">
		<dl>
			<dt><label for="id">Cyworld URL:</label></dt>
			<dd>http://www.cyworld.com/<input type="text" name="id" id="id" size="20" required></dd>
			<dt><label for="includes-private-data">Private Data</label></dt>
			<dd><input type="checkbox" id="includes-private-data" disabled="disabled"> <label for="includes-private-data">Includes private data</label></dd>
		</dl>
		<input type="submit" disabled>
		</form>
		<form action="/export" method="post" id="export-form"
		<fieldset>
			<legend>Photo albums <button class="select-all" id="select-all-photo">Select All</button></legend>
			<ul id="photo-folders"></ul>
		</fieldset>
		<fieldset>
			<legend>Diary <button class="select-all" id="select-all-diary">Select All</button></legend>
			<ul id="diary-folders"></ul>
		</fieldset>
		<input type="submit">
		</form>
		<img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-3191390748008227";
		google_ad_slot = "0094634488";
		google_ad_width = 200;
		google_ad_height = 200;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>		
	</body>
</html>